<template>
  <div style="padding-top: 110px">
    <div class="app-title-container title-position">
      <modules-title titleName="设置/项目报告设置">
        <template slot="btn">
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            @click="save"
            >保存</el-button
          >
        </template>
      </modules-title>
    </div>
    <div style="padding: 20px">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="周报" name="first">
          <span slot="label"><i class="el-icon-date"></i> 周报</span>
          <div>
            <div >
              <div class="title-container">
                <!-- <div class="left">
                  <p class="title-con"><span>设置规则</span></p>
                </div> -->
                <!-- <div>
                  <span style="font-size: 14px; color: rgb(16, 16, 16)"
                    >开启功能</span
                  >
                  <el-switch
                    v-model="value1"
                    style="margin-left: 20px"
                  ></el-switch>
                </div> -->
              </div>
            </div>
            <el-form ref="form" :model="form" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="重复频率">
                    <el-input
                      v-model="form.rate"
                      disabled
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="需要写报告职员">
                <span>项目所有成员</span>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="报告提交给">
                    <el-checkbox-group v-model="form.type">
                      <el-checkbox label="项目负责人" name="type"></el-checkbox>
                      <el-checkbox label="任务负责人" name="type"></el-checkbox>
                      <el-checkbox label="直接上级" name="type"></el-checkbox>
                      <el-checkbox label="部门负责人" name="type"></el-checkbox>
                      <el-checkbox label="指定职员" name="type"></el-checkbox>
                      <el-select
                        multiple
                        collapse-tags
                        v-model="form.region"
                        placeholder="选择指定职员"
                        v-if="form.type.includes('指定职员')"
                        style="margin-left: 20px; width: 400px"
                        @change="selectNumber"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.user_name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="提交截止时间">
                    <el-cascader
                    disabled
                      :options="option1"
                      style="width: 400px"
                      v-model="date1"
                      @change="handleChange1"
                    ></el-cascader>
                    <el-checkbox
                    disabled
                     v-model="is_submit"
                      style="margin-left: 20px"
                      label="截止时间后仍可提交报告"
                      name="type"
                    ></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="催交提醒时间">
                    <el-cascader
                    disabled
                      :options="option2"
                      style="width: 400px"
                      v-model="date2"
                      @change="handleChange2"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="提醒设置">
                  <div style="display: flex">
                    <div>
                      <span>报告提交提醒</span>
                      <el-switch
                      disabled
                        v-model="form.value2"
                        active-text="开启"
                        inactive-text=""
                        style="margin-left: 20px"
                      ></el-switch>
                    </div>
                    <div style="margin-left: 80px">
                      <span>新评论提醒</span>
                      <el-switch
                      disabled
                        v-model="form.value3"
                        active-text="开启"
                        inactive-text=""
                        style="margin-left: 20px"
                      ></el-switch>
                    </div>
                  </div>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="报告内容">
                  <div v-for="(item,index) in fields" :key='index'>
                   <el-form-item :label=item.Name>
                      <el-checkbox label="前端显示" v-model="item.Enable" name="type" disabled></el-checkbox>
                      <el-checkbox label="必填" v-model="item.Required" name="type" disabled></el-checkbox>
                  </el-form-item> 
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="月报" name="second">
          <span slot="label"><i class="el-icon-date"></i> 月报</span>
          <div>
            <div>
              <div class="title-container">
                <!-- <div class="left">
                  <p class="title-con"><span>设置规则</span></p>
                </div> -->
                <!-- <div>
                  <span style="font-size: 14px; color: rgb(16, 16, 16)"
                    >开启功能</span
                  >
                  <el-switch
                    v-model="value2"
                    style="margin-left: 20px"
                  ></el-switch>
                </div> -->
              </div>
            </div>
            <el-form ref="form" :model="form" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="重复频率">
                    <el-input
                      v-model="form.rate"
                      disabled
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="需要写报告职员">
                <span>项目所有成员</span>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="报告提交给">
                    <el-checkbox-group v-model="form.type1">
                      <el-checkbox label="项目负责人" name="type"></el-checkbox>
                      <el-checkbox label="任务负责人" name="type"></el-checkbox>
                      <el-checkbox label="直接上级" name="type"></el-checkbox>
                      <el-checkbox label="部门负责人" name="type"></el-checkbox>
                      <el-checkbox label="指定职员" name="type"></el-checkbox>
                      <el-select
                        multiple
                        collapse-tags
                        v-model="form.region1"
                        placeholder="选择指定职员"
                        v-if="form.type1.includes('指定职员')"
                        style="margin-left: 20px; width: 400px"
                        @change="selectNumber1"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.user_name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="提交截止时间">
                    <el-cascader
                    disabled
                      :options="option3"
                      style="width: 400px"
                      v-model="date3"
                    ></el-cascader>
                    <el-checkbox
                    disabled
                    v-model="is_submit1"
                      style="margin-left: 20px"
                      label="截止时间后仍可提交报告"
                      name="type"
                    ></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="催交提醒时间">
                    <el-cascader
                    disabled
                      :options="option4"
                      style="width: 400px"
                      v-model="date4"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="提醒设置">
                  <div style="display: flex">
                    <div>
                      <span>报告提交提醒</span>
                      <el-switch
                      disabled
                        v-model="form.value4"
                        active-text="开启"
                        inactive-text=""
                        style="margin-left: 20px"
                      ></el-switch>
                    </div>
                    <div style="margin-left: 80px">
                      <span>新评论提醒</span>
                      <el-switch
                      disabled
                        v-model="form.value5"
                        active-text="开启"
                        inactive-text=""
                        style="margin-left: 20px"
                      ></el-switch>
                    </div>
                  </div>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="报告内容">
                  <div v-for="(item,index) in fields" :key='index'>
                   <el-form-item :label=item.Name>
                      <el-checkbox label="前端显示" v-model="item.Enable" name="type" disabled></el-checkbox>
                      <el-checkbox label="必填" v-model="item.Required" name="type" disabled></el-checkbox>
                  </el-form-item> 
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import dates from "@/assets/js/dates.js";
import { userList } from "@/api/authorization";
import { reportSetting, reportUpdate } from "@/api/report";
export default {
  data: function () {
    return {
      fields:[],
      is_submit:false,
      is_submit1:false,
      options: [],
      activeName: "first",
      value1: true,
      value2: true,
      label: "",
      form: {
        rate: "每周",
        name: "",
        region: [],
        region1: [],
        startTime: "",
        endTime: "",
        value2: true,
        value3: true,
        value4: true,
        value5: true,
        type: [],
        type1: [],
        type2: [],
        type3: [],
        type4: [],
        type5: [],
        type6: [],
        type7: [],
        type8: [],
        resource: "",
        desc: "",
      },
      option1: [],
      option2: [],
      option3: [],
      option4: [],
      date1: [
        
      ],
      date2: [],
      date3: [],
      date4: [],
      type: "week",
      enable: 0,
      report_to_project_head: 0,
      report_to_task_head: 0,
      immediate_superior: 0,
      department_head: 0,
      member: [],
      id: "",
      dataInfo: {},
    };
  },
   created() {
    this.option1 = dates.option1;
    this.option2 = dates.option2;
    this.option3 = dates.option3;
    this.option4 = dates.option4;
    this.getsetting(this.type);
    this.handleUserData();
  },
  mounted() {
    this.getsetting(this.type);
  },
  methods: {
    //获取用户列表
    handleUserData() {
      let data = {
        department_id: "",
        phone: "",
        user_name: "",
        user_status: "",
        request_type: 1,
      };
      userList(data).then((res) => {
        if (res.code === 200) {
          console.log(res.data);
          this.options = res.data.data;
        }
      });
    },
    //获取设置信息
     getsetting(type) {
       reportSetting(type).then((res) => {
        if (res.code == 200) {
          // console.log(res.data)
          this.id = res.data.id;
          this.type = res.data.code;
          this.dataInfo = res.data;
          // if (this.dataInfo.enable == 0) {
          //   this.value1 = this.dataInfo.enable;
          // } else {
          //   this.value1 = true;
          // }
          if (this.type == "week") {
            this.value1 = this.dataInfo.enable;
            this.form.type = [];
            if (this.dataInfo.report_to_project_head == 1) {
              this.form.type.push("项目负责人");
            }
            if (this.dataInfo.report_to_task_head == 1) {
              this.form.type.push("任务负责人");
            }
            if (this.dataInfo.immediate_superior == 1) {
              this.form.type.push("直接上级");
            }
            if (this.dataInfo.department_head == 1) {
              this.form.type.push("部门负责人");
            }
            if (this.dataInfo.member_id!=null) {
              if(this.dataInfo.member_id.length != 0){
                 this.form.type.push("指定职员");
                 this.form.region = this.dataInfo.member_id;
              }
            }
            this.date1 = [];
            if(this.dataInfo.end_time.Offset){
              let num = Number(this.dataInfo.end_time.Week)+10
              this.$set(this.date1,0,String(num))
            }else{
               this.$set(this.date1,0,this.dataInfo.end_time.Week)
            }
            // if(this.dataInfo.end_time.Offset=='0'){
            //   this.$set(this.date1,0,this.dataInfo.end_time.Week)
            // }else{
            //   let num = Number(this.dataInfo.end_time.Week)+10
            //   this.$set(this.date1,0,String(num))
            // }
            this.$set(this.date1,1,this.dataInfo.end_time.Hour)
            this.$set(this.date1,2,this.dataInfo.end_time.Minute)
            this.date2 = []
            this.$set(this.date2,0,'-')
            this.$set(this.date4,0,'-')
            let num1 = Math.abs(Number(this.dataInfo.notify_time.Week))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Week)) : String(Math.abs(Number(this.dataInfo.notify_time.Week)))
            let num2 = Math.abs(Number(this.dataInfo.notify_time.Hour))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Hour)) : String(Math.abs(Number(this.dataInfo.notify_time.Hour)))
            let num3 = Math.abs(Number(this.dataInfo.notify_time.Minute))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Minute)) : String(Math.abs(Number(this.dataInfo.notify_time.Minute)))
            this.$set(this.date2,1,num1)
            this.$set(this.date2,2,num2)
            this.$set(this.date2,3,num3)
            this.is_submit = this.dataInfo.is_submit
            this.form.value2 = this.dataInfo.enable_submit_notify
            this.form.value3 = this.dataInfo.enable_comment_notify
            this.fields = this.dataInfo.fields
          } else {
            this.value2 = this.dataInfo.enable;
            this.form.type1 = [];
            if (this.dataInfo.report_to_project_head == 1) {
              this.form.type1.push("项目负责人");
            }
            if (this.dataInfo.report_to_task_head == 1) {
              this.form.type1.push("任务负责人");
            }
            if (this.dataInfo.immediate_superior == 1) {
              this.form.type1.push("直接上级");
            }
            if (this.dataInfo.department_head == 1) {
              this.form.type1.push("部门负责人");
            }
            if (this.dataInfo.member_id!=null) {
              if(this.dataInfo.member_id.length != 0){
                 this.form.type1.push("指定职员");
                 this.form.region1 = this.dataInfo.member_id;
              }
            }
            this.date3 = [];
            if(this.dataInfo.end_time.Offset){
              let num = Number(this.dataInfo.end_time.Day)+60
              this.$set(this.date3,0,String(num))
            }else{
              this.$set(this.date3,0,this.dataInfo.end_time.Day)
            }
            // if(this.dataInfo.end_time.Offset=='0'){
            //   this.$set(this.date3,0,this.dataInfo.end_time.Day)
            // }else{
            //   let num = Number(this.dataInfo.end_time.Day)+60
            //   this.$set(this.date3,0,String(num))
            // }
            this.$set(this.date3,1,this.dataInfo.end_time.Hour)
            this.$set(this.date3,2,this.dataInfo.end_time.Minute)
            this.date4 = []
            this.$set(this.date4,0,'-')
            let num1 = Math.abs(Number(this.dataInfo.notify_time.Day))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Day)) : String(Math.abs(Number(this.dataInfo.notify_time.Day)))
            let num2 = Math.abs(Number(this.dataInfo.notify_time.Hour))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Hour)) : String(Math.abs(Number(this.dataInfo.notify_time.Hour)))
            let num3 = Math.abs(Number(this.dataInfo.notify_time.Minute))<10 ? '0'+ Math.abs(Number(this.dataInfo.notify_time.Minute)) : String(Math.abs(Number(this.dataInfo.notify_time.Minute)))
            this.$set(this.date4,1,num1)
            this.$set(this.date4,2,num2)
            this.$set(this.date4,3,num3)
            console.log(this.date4)
            this.is_submit1 = this.dataInfo.is_submit
            this.form.value4 = this.dataInfo.enable_submit_notify
            this.form.value5 = this.dataInfo.enable_comment_notify
            this.fields = this.dataInfo.fields
          }
        }
      });
    },
    selectNumber() {
      this.member = [];
      this.form.region.forEach((item) => {
        this.options.forEach((itm) => {
          if (item == itm.id) {
            let arr = {
                id:itm.id,
                member_id: itm.id,
                member_name: itm.user_name,
                department_id: itm.department.id,
                department_name: itm.department_name,
            };
            this.member.push(arr);
            if (itm.department != null) {
              let arr = {
                id:itm.id,
                member_id: itm.id,
                member_name: itm.user_name,
                department_id: itm.department.id,
                department_name: itm.department_name,
              };
              this.member.push(arr);
            }
          }
        });
      });
    },
    selectNumber1() {
      this.member = [];
      this.form.region1.forEach((item) => {
        this.options.forEach((itm) => {
          if (item == itm.id) {
            if (itm.department != null) {
              let arr = {
                id:itm.id,
                member_id: itm.id,
                member_name: itm.user_name,
                department_id: itm.department.id,
                department_name: itm.department_name,
              };
              this.member.push(arr);
            }
          }
        });
      });
    },
    handleChange1(value) {
      console.log(value,this.date1);
    },
    handleChange2(value) {
      console.log(value);
    },
    handleClick() {
      if (this.activeName == "first") {
        this.form.rate = "每周";
        this.type = "week";
        this.getsetting(this.type);
      } else {
        this.form.rate = "每月";
        this.type = "month";
        this.getsetting(this.type);
      }
    },
    save() {
      // if (this.value1 == true) {
      //   this.enable = 1;
      // } else {
      //   this.enable = 0;
      // }
      let region = [];
      if (this.type == "week") {
        region = this.form.region;
        console.log(this.form.region)
        if (this.form.type.includes("项目负责人")) {
          this.report_to_project_head = 1;
        }
        if (this.form.type.includes("任务负责人")) {
          this.report_to_task_head = 1;
        }
        if (this.form.type.includes("直接上级")) {
          this.immediate_superior = 1;
        }
        if (this.form.type.includes("部门负责人")) {
          this.department_head = 1;
        }
        if(!this.form.type.includes("指定职员")){
          this.member=[]
          region=[]
        }
      } else {
        region = this.form.region1;
        if (this.form.type1.includes("项目负责人")) {
          this.report_to_project_head = 1;
        }
        if (this.form.type1.includes("任务负责人")) {
          this.report_to_task_head = 1;
        }
        if (this.form.type1.includes("直接上级")) {
          this.immediate_superior = 1;
        }
        if (this.form.type1.includes("部门负责人")) {
          this.department_head = 1;
        }
       if(!this.form.type1.includes("指定职员")){
          this.member=[]
          region=[]
        }
      }
      let v = ''
      if(this.type == "week"){
        v=this.value1
      }else{
        v=this.value2
      }
      let data = {
        id: this.id,
        enable:v,
        code: this.type,
        report_to_project_head: Number(this.report_to_project_head),
        report_to_task_head:  Number(this.report_to_task_head),
        immediate_superior: Number(this.immediate_superior),
        department_head: Number(this.department_head),
        member: this.member,
        member_id: region,
      };
      reportUpdate(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.getsetting(this.type);
          this.report_to_project_head=''
          this.report_to_task_head=''
          this.immediate_superior=''
          this.department_head=''
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/assets/scss/views/sampleInspection/log.scss";
</style>